<!--
 * @Author: your name
 * @Date: 2021-07-12 15:48:16
 * @LastEditTime: 2021-11-09 11:05:39
 * @LastEditors: Please set LastEditors
 * @Description: Common feed form
 * @FilePath: \jinfeng_up\src\components\Feedback\Feedback.vue
-->
<template>
  <div class="insertFormWrap">
    <el-form :model="dynamicValidateForm" ref="dynamicValidateForm">
      <el-row type="flex" justify="spce-betweeen" :gutter="20">
        <el-col :span="8">
          <el-form-item
            label="产品名称"
            class="ProductionName"
            prop="productId"
            :rules="{
              required: true,
              message: '请选择产品名称',
              trigger: 'select'
            }"
          >
            <el-select v-model="dynamicValidateForm.productId" placeholder="请选择产品名称" @change="productionChange">
              <el-option v-for="(item, index) in ProductList" :key="index" :label="item.name" :value="item.id">
              </el-option>
            </el-select>
          </el-form-item>
        </el-col>

        <el-col :span="8">
          <el-form-item
            label="营销项目名称"
            class="Marketing"
            prop="marketProjectFirst"
            :rules="{
              required: true,
              message: '请选择营销项目名称',
              trigger: 'select'
            }"
          >
            <el-select
              v-model="dynamicValidateForm.marketProjectFirst"
              placeholder="请选择营销项目名称"
              @change="marketProjectChange"
            >
              <el-option
                v-for="(item, index) in marketProjectFirstList"
                :key="index"
                :label="item.title"
                :value="item.id"
              >
              </el-option>
            </el-select>
          </el-form-item>
        </el-col>

        <el-col :span="8">
          <el-form-item
            label="版本号"
            class="VersionNum"
            prop="versionNumber"
            :rules="{
              required: true,
              message: '请输入版本号',
              trigger: 'blur'
            }"
          >
            <el-input v-model="dynamicValidateForm.versionNumber"></el-input>
          </el-form-item>
        </el-col>
      </el-row>

      <el-row type="flex" justify="space-between" :gutter="20">
        <el-col :span="8">
          <el-form-item
            label="营销项目状态"
            class="Marketing"
            prop="marketProjectSecond"
            :rules="{
              required: true,
              message: '请选择营销项目状态',
              trigger: 'select'
            }"
          >
            <el-select v-model="dynamicValidateForm.marketProjectSecond" placeholder="请选择营销项目状态">
              <el-option
                v-for="(item, index) in marketProjectSecondList"
                :key="index"
                :label="item.title"
                :value="item.id"
              >
              </el-option>
            </el-select>
          </el-form-item>
        </el-col>

        <el-col :span="8">
          <el-form-item
            label="反馈来源"
            class="DesignatedPerson"
            prop="feedBackSource"
            :rules="{
              required: true,
              message: '请选择反馈来源',
              trigger: 'select'
            }"
          >
            <el-select v-model="dynamicValidateForm.feedBackSource" placeholder="请选择反馈来源">
              <el-option v-for="(item, index) in feedBackSourceList" :key="index" :label="item.title" :value="item.id">
              </el-option>
            </el-select>
          </el-form-item>
        </el-col>

        <el-col :span="8">
          <el-form-item
            label="指派人"
            class="DesignatedPerson"
            prop="userId"
            :rules="{
              required: true,
              message: '请选择指派人',
              trigger: 'select'
            }"
          >
            <el-select v-model="dynamicValidateForm.userId" placeholder="请选择指派人">
              <el-option v-for="(item, index) in UserList" :key="index" :label="item.name" :value="item.id">
              </el-option>
            </el-select>
          </el-form-item>
        </el-col>
      </el-row>

      <el-row type="flex" justify="spce-betweeen" :gutter="20">
        <el-col :span="8">
          <el-form-item
            label="阶段名称"
            class="ProductionName"
            prop="stage"
            :rules="{
              required: true,
              message: '请选择处理阶段',
              trigger: 'select'
            }"
          >
            <el-select v-model="dynamicValidateForm.stage" placeholder="请选择处理阶段" @change="productionChange">
              <el-option v-for="(item, index) in childStageList" :key="index" :label="item.name" :value="item.id">
              </el-option>
            </el-select>
          </el-form-item>
        </el-col>
      </el-row>

      <!-- 往下的表单内容都是可动态新增的 -->

      <div
        v-for="(feedBackInputs, index) in dynamicValidateForm.feedBackInputs"
        :key="feedBackInputs.key"
        class="feedBackitem"
      >
        <!-- <div class="aboutFeedDetail">
        反馈详情描述
      </div> -->
        <div class="productionDetail">
          <span> 反馈详情描述</span>
          <div class="linethrough"></div>
          <span class="deleteOne" @click.prevent="removefeedBackInputs(feedBackInputs)" v-if="index != 0">删除</span>
          <span class="insertOne" @click="addfeedBackInputs">新增</span>
        </div>

        <el-row type="flex" :gutter="20">
          <el-col :span="8">
            <el-form-item
              class="Marketing"
              label="标题"
              :prop="'feedBackInputs.' + index + '.title'"
              :rules="{
                required: true,
                message: '标题不能为空',
                trigger: 'blur'
              }"
            >
              <el-input v-model="feedBackInputs.title"></el-input>
            </el-form-item>
          </el-col>

          <el-col :span="8">
            <el-form-item
              label="问题类型"
              class="DesignatedPerson"
              :prop="'feedBackInputs.' + index + '.problemTypeId'"
              :rules="{
                required: true,
                message: '请选择问题类型',
                trigger: 'select'
              }"
            >
              <el-select v-model="feedBackInputs.problemTypeId" placeholder="请选择问题类型">
                <el-option v-for="(item, index) in problemTypeList" :key="index" :label="item.title" :value="item.id">
                </el-option>
              </el-select>
            </el-form-item>
          </el-col>
        </el-row>

        <el-row>
          <el-col>
            <div class="questionDesc"><span style="color:red;">*</span>问题描述</div>
            <!-- <el-button v-model="feedBackInputs.problemDescribe"></el-button> -->
            <quill-editor v-model="feedBackInputs.problemDescribe" ref="notesQuillEditor"> </quill-editor>
          </el-col>
        </el-row>
        <el-row>
          <el-col>
            <!-- <el-button v-model="feedBackInputs.problemDescribe"></el-button> -->
            <div class="questionDesc"><span style="color:red;">*</span>初步排查结果</div>

            <quill-editor v-model="feedBackInputs.excludeResult" ref="notesQuillEditor"> </quill-editor>
          </el-col>
        </el-row>

        <el-row type="flex" justify="spce-betweeen" :gutter="20">
          <el-col :span="8">
            <div class="questionDesc"><span style="color:red;">*</span>是否服务请求</div>
            <el-form-item
              :prop="'feedBackInputs.' + index + '.isServerRequest'"
              :rules="{
                required: true,
                message: '请选择是否服务请求',
                trigger: 'select'
              }"
            >
              <el-radio-group v-model="feedBackInputs.isServerRequest" @change="isServerRequestChange">
                <el-radio :label="true">是</el-radio>
                <el-radio :label="false" :class="!feedBackInputs.isServerRequest ? 'is-checked' : ''">否</el-radio>
              </el-radio-group>
            </el-form-item>
          </el-col>

          <el-col :span="8" v-show="feedBackInputs.isServerRequest">
            <el-form-item
              label="服务请求编号"
              class="Marketing"
              :prop="'feedBackInputs.' + index + '.serverRequestNumber'"
              :rules="{
                required: true,
                message: '请选择请求编号',
                trigger: 'select'
              }"
            >
              <el-input v-model="feedBackInputs.serverRequestNumber"></el-input>
            </el-form-item>
          </el-col>

          <el-col :span="8" v-show="feedBackInputs.isServerRequest">
            <el-form-item label="服务请求创建时间" class="serviceRequestNum ProductionName serviseReqCreateTime">
              <el-date-picker v-model="feedBackInputs.serverRequestTime" type="date" placeholder="请选择创建时间">
              </el-date-picker>
            </el-form-item>
          </el-col>
        </el-row>

        <el-row :gutter="25" type="flex" justify="spce-betweeen">
          <el-col :span="8">
            <el-form-item label="截止日期" class="DesignatedPerson serviceRequestNum">
              <el-date-picker v-model="feedBackInputs.expirationDate" type="datetime" placeholder="请选择截止日期">
              </el-date-picker>
            </el-form-item>
          </el-col>

          <el-col :span="8">
            <el-form-item
              label="影响类别 "
              class="VersionNum"
              :prop="'feedBackInputs.' + index + '.influenceCategory'"
              :rules="{
                required: true,
                message: '请选择影响类别',
                trigger: 'select'
              }"
            >
              <el-select v-model="feedBackInputs.influenceCategory" placeholder="请选择影响类别">
                <el-option
                  v-for="(item, index) in influenceCategory"
                  :key="index"
                  :label="item.title"
                  :value="item.value"
                >
                </el-option>
              </el-select>
            </el-form-item>
          </el-col>
        </el-row>

        <el-row>
          <el-col>
            <el-form-item
              label="影响描述"
              class="FeedBackDeatailDesc"
              :prop="'feedBackInputs.' + index + '.influenceDescribe'"
              :rules="{
                required: true,
                message: '请选择影响类别',
                trigger: 'select'
              }"
            >
              <el-input v-model="feedBackInputs.influenceDescribe" type="textarea"></el-input>
            </el-form-item>
          </el-col>
        </el-row>

        <el-row>
          <el-col>
            <el-form-item label="添加附件" class="uploadFiles">
              <br />
              <el-upload class="upload-demo" action="https://jsonplaceholder.typicode.com/posts/" multiple :limit="3">
                <el-button size="small" type="primary">点击上传</el-button>
              </el-upload>
            </el-form-item>
          </el-col>
        </el-row>
      </div>
    </el-form>
    <!-- <el-form-item>
        <el-button
          @click="submitForm('dynamicValidateForm')"
          icon="el-icon-s-claim"
        ></el-button>
        <el-button
          @click="resetForm('dynamicValidateForm')"
          icon="el-icon-refresh"
        ></el-button>
      </el-form-item> -->
  </div>
</template>

<script>
import { FeedBack } from '@/api/feedBack/server'
export default {
    name: '',
    components: {},
    props: {},
    data() {
        return {
            activeNames: ['1'],

            // 创建反馈表单
            dynamicValidateForm: {
                feedBackInputs: [
                    {
                        title: null,
                        problemDescribe: null,
                        excludeResult: null,
                        isServerRequest: false,
                        serverRequestNumber: null,
                        serverRequestTime: null,
                        expirationDate: null,
                        influenceDescribe: null,
                        problemTypeId: null,
                        isService: null,
                        influenceCategory: null
                    }
                ],
                productId: null,
                userId: null,
                draftTag: null,
                versionNumber: null,
                marketProjectFirst: null,
                marketProjectSecond: null,
                feedBackSource: null,
                stage: null
            },

            // 动态控制服务是否开启
            radio: 'false',

            // 产品列表
            ProductList: [],

            // 指派人列表
            UserList: [],

            // 营销项目名称列表
            marketProjectFirstList: [],

            // 营销项目状态列表
            marketProjectSecondList: [],

            // 反馈来源列表
            feedBackSourceList: [],

            // 问题类型列表
            problemTypeList: [],

            // 阶段列表
            stageList: [],
            childStageList: [],

            // 影响类别列表
            influenceCategory: [
                {
                    title: '影响现场生产',
                    value: 0
                },
                {
                    title: '影响验收',
                    value: 1
                },
                {
                    title: '影响回款',
                    value: 2
                },
                {
                    title: '影响不大',
                    value: 3
                }
            ]
        }
    },
    computed: {},
    watch: {},
    created() {},
    mounted() {
    /* 数据字典 */
        this.getProductList()
        this.getStageList()
        this.getChildStageList()
        this.getMarketProjectFirstList('0') // 营销项目名称
        this.getMarketProjectFirstList('1') // 反馈来源列表
        this.getMarketProjectFirstList('2') // 问题类型列表
    },
    methods: {
    /* 产品相关开始 */

        // 获取所有产品信息
        async getProductList() {
            try {
                const result = await FeedBack.ProInsertAsync()
                if (result.success) {
                    this.ProductList = result.data
                    console.log(result.data)
                }
            } catch (err) {
                console.log(err)
            }
        },

        // 产品名称选择器 (选择改变指派人)

        async productionChange(_val) {
            // 根据产品ID获得指派人列表
            try {
                const result = await FeedBack.GetListItemAsync({ id: _val })
                if (result.success) {
                    this.UserList = result.data
                    console.log('MM', result.data)
                }
            } catch (err) {
                console.log(err)
            }
        },

        // 营销项目名称选择器(选择改变营销项目状态)
        async marketProjectChange(_val) {
            // 根据营销项目名称ID获得营销项目状态列表
            try {
                const result = await FeedBack.FormOptionGetListItemAsync({
                    id: _val,
                    type: '0'
                })
                if (result.success) {
                    this.marketProjectSecondList = result.data
                    console.log('MM', result.data)
                }
            } catch (err) {
                console.log(err)
            }
        },

        //  判断是否服务请求
        isServerRequestChange(_val) {
            console.log(_val)
            this.isServerOpen = _val
        },

        /* 产品相关结束 */

        // 获取相关下拉列表(type)
        async getMarketProjectFirstList(type) {
            if (type == '0') {
                try {
                    const result = await FeedBack.FormOptionGetListItemAsync({
                        type: type
                    })
                    if (result.success) {
                        this.marketProjectFirstList = result.data
                        console.log('M', result.data)
                    }
                } catch (err) {
                    console.log(err)
                }
            } else if (type == '1') {
                try {
                    const result = await FeedBack.FormOptionGetListItemAsync({
                        type: type
                    })
                    if (result.success) {
                        this.feedBackSourceList = result.data
                        console.log('S', result.data)
                    }
                } catch (err) {
                    console.log(err)
                }
            } else {
                try {
                    const result = await FeedBack.FormOptionGetListItemAsync({
                        type: type
                    })
                    if (result.success) {
                        this.problemTypeList = result.data
                        console.log('P', result.data)
                    }
                } catch (err) {
                    console.log(err)
                }
            }
        },

        // 获取所有阶段列表

        async getStageList() {
            try {
                const result = await FeedBack.GetStageListAsync({ type: 'Name' })
                if (result.success) {
                    this.stageList = result.data
                    console.log('JJ', result.data)
                }
            } catch (err) {
                console.log(err)
            }
        },
        async getChildStageList() {
            try {
                const result = await FeedBack.GetListChildrenAsync({ type: 'Name' })
                if (result.success) {
                    this.childStageList = result.data
                    console.log('JJ', result.data)
                }
            } catch (err) {
                console.log(err)
            }
        },

        submitForm(formName) {
            this.$refs[formName].validate(valid => {
                if (valid) {
                    alert('submit!')
                } else {
                    return false
                }
            })
        },
        resetForm(formName) {
            this.$refs[formName].resetFields()
        },
        removefeedBackInputs(item) {
            var index = this.dynamicValidateForm.feedBackInputs.indexOf(item)
            if (index !== -1) {
                this.dynamicValidateForm.feedBackInputs.splice(index, 1)
            }
        },
        addfeedBackInputs() {
            this.dynamicValidateForm.feedBackInputs.push({
                value: '',
                key: Date.now(),
                isServerRequest: false
            })

            console.log(this.dynamicValidateForm)
        },

        getForm() {
            // console.log(this.dynamicValidateForm);
            this.$emit('func', this.dynamicValidateForm)
        },
        getFormS() {
            this.$emit('func1', this.dynamicValidateForm)
        }
    }
}
</script>

<style scoped lang="less" src="./commonForm.less"></style>
